<template>
  <div class="serve-detalil flex-col flex-y-center">
    <div class="serve-detalil-text flex-col">
      <div class="text-align m-b-20">
        <h2>服务详情</h2>
      </div>

      <div>
        <h3>
          参考价：&emsp;&emsp;表面清洁 490元/间 &emsp;&emsp; 深度清洁 840元/间
        </h3>
        <h3>
          预约时长：&emsp;&emsp;表面清洁 3-5小时 &emsp;&emsp;深度清洁 6-8小时
        </h3>
        <h3></h3>

        <h3>温馨提示</h3>
        <ol>
          <li>
            厨房保养不包含延伸阳台、储物间等扩展空间;
            2.开放式厨房，深度清洁包括延伸餐厅的清洁，但不包括客厅的清洁；
          </li>
          <li>
            玻璃窗、纱窗、百叶窗、防护窗的清洗，为安全起见，二层以上不提供室外作业，工作人员会通过专业工具进行精细服务。
          </li>
          <li>
            工作人员会携带服务过程中所用到的清洁剂，也可根据客户需求采用客户家中有自己喜爱品牌的清洁剂。
          </li>
          <li>
            工作人员会尽可能的清洗纱窗、百叶窗、防护窗，如遇纱窗无法拆卸、纱窗老化、生锈的防护窗等特殊情况，无法保证清洗效果，请您谅解;
          </li>
        </ol>
      </div>
    </div>

    <div class="descriptions-view">
      <h3>服务内容：</h3>
      <el-table :data="tabledata" border>
        <el-table-column
          prop="mj"
          label="项目"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="date"
          label="内容"
          align="center"
        ></el-table-column>
      </el-table>
    </div>

    <div class="flex-y-center next-but flex-x-reverse">
      <el-button @click="nextchange" type="primary" style="width: 200px"
        >下一步</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentRow: false,
      tabledata: [
        {
          mj: "厨房清洁",
          date: "厨房天花板、墙面、开关、门、橱柜、置物架、台面、墙角、踢脚线、地面、垃圾桶、洗菜池、内玻璃、外玻璃、窗框、窗槽、把手、纱窗。",
        },
        {
          mj: "家电清洁",
          date: "油烟机、冰箱、微波炉、电烤箱、消毒柜",
        },
      ],
    };
  },
  methods: {
    nextchange() {
      this.$router.push({
        name: "chufang-form",
        query: {
          stepsactive: 3,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.serve-detalil {
  width: 100%;
  border: 1px solid #e4e7ed;
  padding: 20px;
  overflow-y: scroll;
  box-shadow: inset 0 0 10px rgba(172, 172, 172, 0.5);

  &::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
  }

  .serve-detalil-text {
    width: 70%;

    h3 {
      line-height: 40px;
    }

    ol li {
      line-height: 30px;
      margin-left: 20px;
    }
  }

  .descriptions-view {
    width: 70%;
    margin-top: 30px;

    h3 {
      margin-bottom: 20px;
    }
  }
}
.next-but {
  width: 100%;
  margin-top: 30px;
  margin-right: 50px;
}
</style>
